import React, { useState } from "react";
import { Checkbox, Input } from "antd";
import style from "./style.less"
import UnvisibleIcon from "../../source/svgs/unvisible.svg"
import VisibleIcon from "../../source/svgs/visible.svg"
import { useNavigate } from "react-router-dom"
import { LoginInfo } from "../../interface/account";
import userStore from "../../store/user";
import cookieStore from "../../store/cookie";
import { checkAccount } from "../../service/account";

interface IProps {
    afterLogin: () => void
}

export default function LoginBox(props: IProps) {
    const [hasStoredPwd, setHasStoredPwd] = useState<boolean>(false)
    const [loginInfo, setLoginInfo] = useState<LoginInfo>({ account: "", password: "" })
    const [pswVisible, setPswVisible] = useState<boolean>(false)
    const [storedPwd, setStoredPwd] = useState<string>("")
    const [savePsw, setSavePsw] = useState<boolean>(false)

    function findStoredPsw(inputAccount: string) {
        setLoginInfo({
            account: inputAccount,
            password: loginInfo.password
        })
        const storedPaw = localStorage.getItem("password-" + inputAccount)?.toString()
        if (storedPaw) {
            setStoredPwd(storedPaw)
            setHasStoredPwd(true)
            setSavePsw(true)
        } else {
            setHasStoredPwd(false)
        }
    }

    return (
        <React.Fragment>
            <div className={style.bgBox}>
                <div className={style.title} >{"C 5 D N"}</div>
                <div>
                    <div className={style.inputBar}>
                        <span className={style.tipTitle}> 用户：</span>
                        <Input className={style.accountInput} width={"200px"} type="text" placeholder="手机号码/账号" onChange={(value) => { findStoredPsw(value.target.value) }} />
                        <div className={style.emptyBox}>{hasStoredPwd ? <span onClick={() => { setLoginInfo({ ...loginInfo, password: storedPwd }) }} className={style.putPwd}>填入密码</span> : <span className={style.putPwd}></span>}</div>
                    </div>
                    <div className={style.inputBar}>
                        <span className={style.tipTitle}>密码：</span>
                        <Input value={loginInfo.password} width={"200px"} className={style.passwordInput} type={pswVisible ? "text" : "password"} placeholder="请输入密码" onChange={(value) => { setLoginInfo({ account: loginInfo.account, password: value.target.value }) }} />
                        {
                            pswVisible ? (
                                <img className={style.eye} onClick={() => { setPswVisible(false) }} src={VisibleIcon} alt="#" />
                            ) : (
                                <img className={style.eye} onClick={() => { setPswVisible(true) }} src={UnvisibleIcon} alt="#" />
                            )
                        }
                    </div>
                </div>
                <Submit savePsw={savePsw} afterLogin={() => { props.afterLogin() }} info={{ account: loginInfo.account, password: loginInfo.password }} />
            </div>
        </React.Fragment>
    )
}

function Submit(props: { info: LoginInfo, afterLogin: () => void, savePsw: boolean }) {
    const navigate = useNavigate()
    const [savePsw, setSavePsw] = useState<boolean>(props.savePsw)

    function handleClick(url: string) {
        navigate('/' + url);
    };

    async function checkPsw(loginInfo: LoginInfo, savePsw: boolean) {
        sessionStorage.setItem("stageUser", loginInfo.account)
        if (savePsw) {
            localStorage.setItem("password-" + loginInfo.account, loginInfo.password)
        }
        // 接口验证登录账号密码
        const userRes = await checkAccount(loginInfo)
        switch (userRes.stat) {
            case 'ok':
                userStore.dispatch({ type: 'LOGIN', loginAccount: loginInfo.account })
                cookieStore.dispatch({ type: 'SET', cookie: userRes.data.token })
                props.afterLogin()
                // handleClick('home')
                return
            case 'Wrong_Pwd':
                alert(userRes.msg)
                return
            case 'Account_Is_Empty':
                alert(userRes.msg)
                return
            case 'Pwd_Is_Empty':
                alert(userRes.msg)
                return
            case 'Not_Auth':
                alert(userRes.msg)
                return
            default:
                alert('登陆失败')
        }
        return
    }

    return (
        <React.Fragment>
            <div className={style.submit}>
                <div className={style.checkBox}>
                    <Checkbox checked={savePsw} onChange={(value) => { setSavePsw(value.target.checked) }} />
                </div>
                <div>记住密码</div>
            </div>
            <span className={style.loginBtn} onClick={() => { checkPsw(props.info, savePsw) }}>登录</span>
            <div className={style.options}>
                <span key={"findbackpsw"} className={style.register} onClick={() => { handleClick('retrievePassword') }} >找回密码</span>
                <span key={"log"} className={style.register} onClick={() => { handleClick('register') }} >注册新账户</span>
            </div>
        </React.Fragment>
    )
}